<!-- 用户喜欢收藏列表模块 -->
<template>
    <div>
        <div class="container">
            <el-row>
                <div class="likeBoxTitle">
                    <h1 v-show="like==1"><i class="fa fa-wa fa-heart"></i>喜欢的文章</h1>
                    <h1 v-show="like!=1"><i class="fa fa-wa fa-star"></i>收藏的文章</h1>
                </div>
                <el-col :span="24" class="s-item tcommonBox" v-for="(item,index) in like===1?likeArticleList:collectArticleList" :key="'like'+index">
                    <span class="s-round-date">
                        <span class="month">{{showInitDate(item.createTime,'month')}}月</span>
                        <span class="day">{{showInitDate(item.createTime,'date')}}</span>
                    </span>
                    <header>
                        <h1>
                          <router-link :to="{path:'/DetailShare'}">
                            <a  @click="setArticleId(item.id)" >
                              {{item.title}}
                            </a>
                          </router-link>
                        </h1>
                        <h2>
                            <i class="fa fa-fw fa-user"></i>发表于
                            <i class="fa fa-fw fa-clock-o"></i>{{showInitDate(item.createTime,'newDate')}} •
                            <i class="fa fa-fw fa-eye"></i>{{item.browseCount}} 次围观 •
                            <i class="fa fa-fw fa-comments"></i>活捉 {{item.commentCount}} 条 •
                            <span class="rateBox">
                                <i class="fa fa-fw fa-heart"></i>{{item.likeCount?item.likeCount:0}}点赞 •
                                <i class="fa fa-fw fa-star"></i>{{item.collectCount?item.collectCount:0}}收藏
                            </span>
                        </h2>
                        <!-- <div class="ui label">
                            <a :href="'#/Share?classId='+item.class_id">{{item.cate_name}}</a>
                        </div> -->
                    </header>
                    <div class="article-content">
                        <p style="text-indent:2em;">
                            {{item.description}}
                        </p>
                        <p style="max-height:300px;overflow:hidden;text-align:center;">
                            <img :src="item.image" alt="" class="maxW">
                        </p>
                    </div>
                    <div class="viewdetail">
                        <a class="cancelbtn tcolors-bg" href="javascript:void(0); " @click="cancel(item.id,like)">取消{{like==1?'喜欢':'收藏'}}</a>&nbsp;&nbsp;&nbsp;&nbsp;
                      <router-link :to="{path:'/DetailShare'}">
                        <a class="tcolors-bg"  @click="setArticleId(item.id)" target="_blank">
                          阅读全文>>
                        </a>
                      </router-link>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
  import {removeFavourite} from '../api/favourite'
  import {getFavouriteArticle} from '../api/article'
  import {initDate} from '../utils/server.js'
    export default {
        data() { //选项 / 数据
            return {
              like:this.$route.params.like,
              likeArticleList:[],
              collectArticleList:[]
            }
        },
        methods: { //事件处理器
          init:function () {
            let that = this
            getFavouriteArticle(this.$store.state.userId).then(response =>{
              that.likeArticleList = response.data.likeList
              that.collectArticleList = response.data.collectList
            })
          },
          showInitDate: function(oldDate,full){
            return initDate(oldDate,full)
          },
          setArticleId:function (articleId) {
            // this.$store.state.articleId = articleId  //异步
            this.$store.commit('setArticleId',articleId) //同步
          },
          cancel:function (articleId,actionType) {
            removeFavourite(this.$store.state.username,articleId,actionType).then(response =>{
              this.init();
            })
          }
        },
        components: { //定义组件

        },
      watch: {
       "$route":function (to,from) {
         this.like = this.$route.params.like
       }
      },
        created() { //生命周期函数
          this.init();
        }
    }
</script>

<style>
.likeBoxTitle{
    text-align: center;
    padding:40px 0;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 40px;
    background: #fff;
    border-radius: 5px;
}
.likeBoxTitle h1{
    font-weight: 700;
}
.likeBoxTitle h1 i{
    color:#DF2050;
    margin-right: 10px;
    font-size: 30px;
}
.cancelbtn{
    background: #ddd;
}
</style>
